<template>
  <div class="social-container">
    <div class="app-container">
      <h2>父组件</h2>
      <hr>
      <!--
       默认插槽(匿名插槽): 默认在组件开始标签和结束标签中间写内容是不会显示的, 需要显示需要在子组件内部slot插槽占位
       场景: 一个只有一个地方替换的时候会使用到
       -----------------------------
       具名插槽:组件中需要有多个地方定制
       作用域插槽: 插槽携带数据(传参)
       <slot :row="list" /> 插槽绑定数据在一个对象中
       使用的时候
        <template #default="scope">
          {{ scope.row }}
        </template>
        -->
      <!-- <son>
        <template v-slot:head>
          <div>jd商城</div>
        </template>
        <template v-slot:body>电子产品.家居</template>
        <template v-slot:foot>我这个人脸盲</template>
      </son>
      <hr>
      <hr>
      <hr>
      <son>
        <template v-slot:head>
          <div>天猫商城</div>
        </template>
        <template v-slot:body>服装.鞋包</template>
        <template v-slot:foot>我对钱没有兴趣</template>
      </son> -->
      <son>
        <template #default="scope">
          {{ scope.row }}
        </template>
      </son>
    </div>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'SocialSecuritys',
  components: { Son },
  data() {
    return {
      color: ''
    }
  }

}
</script>

<style>

</style>
